<template>
<div>
  <div>
  <el-container>
   
  <vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="star"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >  </vue-particles>
    <div class="bloglist">     
      <W-BlogList :Blogs="Blogs"></W-BlogList> 
      <div class="page">     
          <el-pagination
            @current-change="handleCurrentChange"
            :background="true"
            layout="prev, pager, next"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            style="position: relative;">
          </el-pagination>
      </div>
    </div>
    <div class="blogleft">
      <W-BlogLeft></W-BlogLeft>
    </div>
   
  </el-container>
</div></div> 
</template>

<script>
import BlogLeft from '../components/section/BlogLeft'
import BlogList from '../components/section/BlogList'
import axios from 'axios'
export default {
  data () {
    return {
      Blogs: [],
      total: 0,
      currentPage: 1, //当前页码
      pageSize: 1    //每页条数
    }
  },
  metaInfo: {
    title: 'lazyzw个人博客', // set a title
  },
  components: {
    'W-BlogLeft': BlogLeft,
    'W-BlogList': BlogList
  },
  methods: {
    handleCurrentChange (currentPage) {
    var that = this;
       axios({ 
        method: "GET",
        url: '/blog/getAllBlogs',
        params:{
           current: currentPage,
           size: 10
        },
        }).then(function (res) {
        that.Blogs = res.data.data;
        that.getImage(2)
        that.convertBlog(that.Blogs)
       if (that.Blogs !== null) { 
        that.currentPage = Number(res.data.data[0].current)
        that.total = Number(res.data.data[0].total)
        that.pageSize = Number(res.data.data[0].size)
        } else {
          that.currentPage = 0
          that.total = 0
          that.pageSize = 0
        }
       
        }).catch(error => {
        console.log(error)
      });
     },
    getBlogs () {
       var that = this;
       axios({ 
        method: "GET",
        url: '/blog/getAllBlogs',
        params:{
           current: 1,
           size: 10
        },
        headers: {'content-type': 'application/x-www-form-urlencoded'}
        }).then(function (res) {
        console.log(res)
        that.Blogs = res.data.data;    
        console.log(that.Blogs)
        that.convertBlog(that.Blogs)
       if (that.Blogs !== null) { 
        that.currentPage = Number(res.data.data[0].current)
        that.total = Number(res.data.data[0].total)
        that.pageSize = Number(res.data.data[0].size)
        } else {
          that.currentPage = 0
          that.total = 0
          that.pageSize = 0
        }
          
        });
        
    },
      convertBlog (blogList) {
      var i = 0
      for (; i < blogList.length; i++) {
        blogList[i].tags = blogList[i].tags.toString().replace('[', '')
        blogList[i].tags = blogList[i].tags.toString().replace(']', '')
        var d = new Date(blogList[i].createTime)
        blogList[i].createTime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() +
             ':' + d.getMinutes() + ':' + d.getSeconds()
        blogList[i].tags = blogList[i].tags.split(',')
      }
    }
  },
  mounted () {
    this.getBlogs()
    //this.convertBlog()
  }
}
</script>

<style lang="less" scoped>
.blogleft{
  margin-left: 4%;

}
.bloglist{
  margin-top: 30px;
  margin-left: -3%;
 
}
.page{
  text-align: center;

}
#particles-js{
width: 97%;
   height: 90%;  
position:fixed;
position: absolute;
 }
 
</style>
